<template>
  <div id="publicPart">
    <el-container class="body">
      <div class="header">
        <div class="head-logo">
          <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1142779724,3538017449&fm=26&gp=0.jpg"
               alt="">
        </div>
        <div class="header-right">

        </div>
      </div>
      <el-container class="container">
        <el-aside width="200px" class="aside">
          <el-row class="tac">
            <el-col :span="12">
              <el-menu
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose"
                  background-color="#545c64"
                  text-color="#fff"
                  active-text-color="#ffd04b"
                  :default-active="theID"
                  router
                >
                <el-submenu
                  v-for="(item,index) in allPages"
                  :index="item.id"
                  :key="index">
                  <template slot="title">
                    <i :class="item.icon"></i>
                    <span>{{item.name}}</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item  v-for="(myitem,i) in item.myChildren" :index="myitem.path">
                      {{myitem.name}}
                    </el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main class="main">
          <router-view/>
        </el-main>
      </el-container>
      <el-footer>

      </el-footer>
    </el-container>

  </div>
</template>

<script>

  export default {

    name: "publicPart",
    data() {
      return {
        myIndex:'',
        myI:'',
        theID:'',
        allPages: [
          {
            id: '1',
            name: '商品',
            icon: 'el-icon-goods',
            myChildren: [
              {
                id: '1-1',
                name: '商品管理',
                path:''
              },
              {
                id: '1-2',
                name: '分类管理',
                path:''
              },
              {
                id: '1-3',
                name: '商品标签',
                path:''
              },
              {
                id: '1-4',
                name: '用户评论',
                path:''
              },
            ]

          },
          {
            id: '2',
            name: '促销',
            icon: 'el-icon-box',
            myChildren: [
              {
                id: '2-1',
                name: '优惠券管理',
                path:''
              },
              {
                id: '2-2',
                name: '限时秒杀',
                path:''
              },
              {
                id: '2-3',
                name: '幸运抽奖',
                path:''
              }
            ]
          },
          {
            id: '3',
            name: '订单',
            icon: 'el-icon-document-copy',
            myChildren: [
              {
                id: '3-1',
                name: '订单列表',
                path:''
              },
              {
                id: '3-2',
                name: '团购列表',
                path:''
              },
              {
                id: '3-3',
                name: '发货单列表',
                path:''
              },
              {
                id: '3-4',
                name: '退货单列表',
                path:''
              },
              {
                id: '3-5',
                name: '批量发货',
                path:''
              },
            ]
          },
          {
            id: '4',
            name: '广告',
            icon: 'el-icon-bell',
            myChildren: [
              {
                id: '4-1',
                name: '文章列表',
                path:''
              },
              {
                id: '4-2',
                name: '文章分类',
                path:''
              },
              {
                id: '4-3',
                name: '广告列表',
                path:''
              }
            ]
          },
          {
            id: '5',
            name: '会员',
            icon: 'el-icon-medal',
            myChildren: [
              {
                id: '5-1',
                name: '会员管理',
                path:'/all/vipIndex'
              },
              {
                id: '5-2',
                name: '会员等级',
                path:'/all/test'
              },
              {
                id: '5-3',
                name: '签到管理',
                path:''
              }
            ]

          },
          {
            id: '6',
            name: '权限',
            icon: 'el-icon-unlock',
            myChildren: [
              {
                id: '6-1',
                name: '管理员列表',
                path:''
              },
              {
                id: '6-2',
                name: '管理员日志',
                path:''
              }
            ]

          },
          {
            id: '7',
            name: '设置',
            icon: 'el-icon-setting',
            myChildren: [
              {
                id: '7-1',
                name: '商店设置',
                path:''
              },
              {
                id: '7-2',
                name: '菜单管理',
                path:''
              },
              {
                id: '7-3',
                name: '支付方式',
                path:''
              },
              {
                id: '7-4',
                name: '配送方式',
                path:''
              },
              {
                id: '7-5',
                name: '配送区域',
                path:''
              },
            ]
          },

        ]
      }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      getIndex(index,i){
        console.log(index);
        console.log(i);
        this.myIndex =index;
        this.myI =i;
        console.log(this.allPages[index].myChildren[i].id);
        this.theID =toString(this.allPages[index]);
      }
    },
    computed: {
      onRoutes() {
        console.log(this.$route.path);// eg ： 输出 /log
        return this.$route.path.replace('/', '');
      }
    },
  }

  //自己的js


</script>

<style scoped>
  #publicPart {
    background-color: gainsboro;
  }

  .body {
    /*background-color: cadetblue;*/
  }

  .container {
    width: 100%;
    overflow: hidden;
  }

  .header {
    height: 80px;
    width: 100%;
    background-color: #2f4452;
    box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
  }

  .head-logo {
    width: 50px;
    height: 50px;
    margin: 15px 20px;
  }

  .head-logo img {
    height: 50px;
    width: 50px;
    object-fit: cover;
  }

  .header-right {
    float: right;
    margin: 15px 30px;
    height: 50px;

  }

  .aside {
    height: 545px;
    overflow: scroll;
    background-color: #545c64;
    margin-right: 10px;
  }

  .aside ul li {
    width: 200px;
  }

  .main {
    width: 100%;
    height: 545px;
    background-color: palegoldenrod;
    overflow: scroll;
  }
</style>
